<template>
    <div>
		<div style="position: fixed;z-index: 100;background-color: #f5f5f5;width: 87.5%;" >
			<div style="border: 1px solid #ccc;">
				<div class="searchForm" style="flex-wrap: nowrap;border: none;height: 60px;">
					<div class="flex" style="flex-wrap: nowrap;">
						<div style="width: 70px;">
							发生日期： 
						</div>
						<el-date-picker
						      v-model="time"
							  size="small"
							  value-format="yyyy-MM-dd"
						      type="daterange"
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期">
						</el-date-picker>
					</div>
					
				    <div class="flex" style="flex-wrap: nowrap;">
						<div style="width: 70px;">
							商品名称： 
						</div>
						<el-input size="small" v-model="search_form.goods_name" 
						placeholder="请输入商品名称"  
						style="width:200px;"></el-input>
				    </div>
					<div class="flex" style="flex-wrap: nowrap;">
						<div style="width: 70px;">
							商品品牌： 
						</div>
						<el-input size="small" v-model="search_form.brand" 
						placeholder="请输入商品品牌"  
						style="width:200px;"></el-input>
					</div>
					<div class="flex" style="flex-wrap: nowrap;">
						<div style="width: 50px;">
							客户： 
						</div>
						<div>
							<selectCustomer 
							 holder="请输入客户名称"
							:supp="search_form.customer" 
							@getCustomerName="getCustomerName" />
						</div>
					</div>
				    <div >
						<div style="display: flex;">
							<div>
								供应商：
							</div>
							<div>
								<selectCustomer :supp="search_form.supplier" 
								@getCustomerName="getSupplierName" />
							</div>
						</div>
				    </div>
					
					<div style="padding: 0 0 10px 10px;">
					    <el-button type="primary" size="mini" @click="search">检索</el-button>
					    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
					</div>
				</div>
				<!-- <div style="padding: 0 0 10px 10px;">
				    <el-button type="primary" size="mini" @click="search">检索</el-button>
				    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
				</div> -->
			</div>
			
			
			<div class="searchForm" style="border: none;padding: 0;margin-bottom: -10px;">
				<div>
				    成本单价： 
					<el-input size="small" v-model="price" 
					placeholder="请输入成本单价"  
					style="width:200px;"></el-input>
					<el-button type="primary" style="margin-left: 10px;" size="mini" 
					@click="updateSalesPrice">修改</el-button>
					<el-button type="primary" style="margin-left: 10px;" size="mini"
					@click="setHsPrice">设为回收成交结算价</el-button>
					<el-button type="primary" style="margin-left: 10px;" size="mini"
					@click="addHsShow=true">添加回收成交结算价</el-button>
					<el-button type="primary" style="margin-left: 10px;" size="mini"
					@click="downLode" >导出</el-button>
				</div>
			</div>
		</div>
		<br> <br /> <br><br>
		<br><br><br>
        <el-table  :data="list"
			 v-loading="loading"
			 border  
			stripe
			 ref="multipleTable"
			 border 
			 @selection-change="handleSelectionChange"
			 @cell-click="cellClick"
			>
			<el-table-column
			      type="selection"
			      width="55">
			</el-table-column>
			<el-table-column  align="center" width="90">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sort('inst_store_date',3)">
						入库日期
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.inst_store_date}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column  align="center" width="90">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sort('buyer_date')">
						发生日期
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.buyer_date}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column  width="240">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sort('goods_name')">	
						商品名称
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.goods_name}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column  align="center"  prop="brand" label="品牌" />
			<el-table-column  width="170">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sort('code',3)">	
						串号
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.code}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column  label="成本单价" width="80"  align="center">
				<template slot="header" slot-scope="scope">
				    <div class="button_text"  @click="sort('inst_store_price',2)">	
						成本单价
					</div>
				</template>
			     <template slot-scope="scope">
					<div style="position: relative;">
						<span v-if="scope.row.type==2">
							{{scope.row.inst_store_price}}
						</span>
						<span v-if="scope.row.type==3">
							-{{scope.row.inst_store_price}}
						</span>
						<i class="el-icon-folder-checked" 
							@click="delHsPrice(scope.row)"
							v-if="scope.row.is_pay_history==1"
							style="position: absolute;top: -0px;
							left: 55px;cursor: pointer;"></i>
					</div>
			     </template>
			 </el-table-column>
			 
			 <el-table-column  align="center" width="100">
			 	<template slot="header" slot-scope="scope">
			 	    <div class="button_text" @click="sort('sales_price',2)">	
			 			销售单价
			 		</div>
			 	</template>
			 	<template slot-scope="scope">
			 	   <div>
					   <span v-if="scope.row.type==2">
						   {{scope.row.sales_price}}
					   </span>
					   <span v-if="scope.row.type==3">
						   -{{scope.row.sales_price}}
					   </span>
			 	   </div>
			 	</template>
			 </el-table-column>
			 
			 <el-table-column  align="center" width="60">
			 	<template slot="header" slot-scope="scope">
			 	    <div class="button_text" @click="sort('profit',2)">	
			 			利润
			 		</div>
			 	</template>
			 	<template slot-scope="scope">
			 	   <div>
			 			{{scope.row.profit | toggleInt}}
			 	   </div>
			 	</template>
			 </el-table-column>
			
			<!-- <el-table-column  align="center"    prop="goods_number" label="数量" /> -->
			<el-table-column  align="center" width="60" label="数量">
				<template slot-scope="scope">
					1
				</template>
			</el-table-column>
			<el-table-column  align="center" width="90"   prop="customer" label="类型">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type==2" size="small">
						批发
					</el-tag>
					<el-tag v-if="scope.row.type==3" size="small" type="danger">
						批发退货
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column  align="center"  prop="remark" label="出库备注" />
			<el-table-column  align="center"  prop="inster_remark" label="采购备注" />
			
			<el-table-column  align="center" width="140">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sort('customer')">	
						客户
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.customer}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column  align="center" width="140">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sort('supplier',3)">	
						供应商
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.supplier}}
				   </div>
				</template>
			</el-table-column>

			<!-- <el-table-column  align="center"    prop="inst_order_number_id" label="入库单据" />
			<el-table-column  align="center"    prop="out_order_number_id" label="出库单据" />
			 -->
			<el-table-column  label="入库单据" width="80" align="center">
			     <template slot-scope="scope">
					<div class="button_text"
						v-if="scope.row.inst_order_number"
						@click="toTypeInfo(scope.row,1)">
						{{$utils.sliceStr(scope.row.inst_order_number,6)}}
					</div>
			     </template>
			 </el-table-column>
			 <el-table-column  label="出库单据" width="80" align="center">
			      <template slot-scope="scope">
					<div class="button_text"
						v-if="scope.row.order_number"
						@click="toTypeInfo(scope.row,2)">
						{{$utils.sliceStr(scope.row.order_number,6)}}
					</div>  
			      </template>
			  </el-table-column>
			  <!-- <el-table-column  label="操作" width="60" fixed="left"  align="center">
			      <template slot-scope="scope">
			         <el-button type="text" size="small" @click="delProfit(scope.row.id,scope)">删除</el-button>
			      </template>
			  </el-table-column> -->
		</el-table>
		
		
		<div style="display: flex;margin-top: 10px;float: left;">
		  <div style="margin-right: 10px;">
			  成本合计：
		       <el-input size="mini" v-model="priceSum" 
			   disabled
		      style="width:150px;"></el-input>  
		  </div>
		  <div>
			  销售合计：
		      <el-input size="mini" v-model="salesSum" 
			  disabled
		      style="width:150px;"></el-input>
		  </div>
		  <div>
		  	  利润合计：
		      <el-input size="mini" v-model="profitSum" 
		  			  disabled
		      style="width:150px;"></el-input>
		  </div>
		</div>
		
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total,sizes,prev, pager, next,jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		  title="查看串号"
		  :close-on-click-modal="false"
		  :visible.sync="isShowLookCode"
		  width="500px">
		  <scanCodeLook :rowData="rowData" />
		</el-dialog>
		<el-dialog
		  title="设置回收成交结算价"
		  :close-on-click-modal="false"
		  :visible.sync="isShow"
		  width="700px">
		  <el-table
		        :data="hsPriceData"
		        style="width: 100%">
		        <el-table-column
				  align="center"
		          prop="goods_name"
		          label="商品名称">
		        </el-table-column>
				<el-table-column  label="成本单价"  align="center">
				     <template slot-scope="scope">
						<el-input v-model="scope.row.inst_store_price" 
							size="small"
							placeholder="请输入内容"></el-input>
				     </template>
				</el-table-column>
		      </el-table>
			  <span slot="footer" class="dialog-footer">
			      <el-button type="primary" 
					size="small"
					:loading="loading_btn"
					@click="setHsPriceConfirm">确 定</el-button>
			    </span>
		</el-dialog>
		
		<el-dialog
		  title="设置回收成交结算价"
		  :close-on-click-modal="false"
		  :visible.sync="addHsShow"
		  width="500px">
			  <addHsPrice v-if="addHsShow" @addHsSuccess="addHsSuccess" />
		</el-dialog>
		
    </div>
</template>
<script>
	import selectCustomer from '@/components/selectCustomer.vue'
	import scanCodeLook from '@/components/scanCodeLook.vue'
	import addHsPrice from './components/addHsPrice.vue'
    export default {
        components:{
			selectCustomer,scanCodeLook,addHsPrice
        },

        data(){
            return {
				list:[],
				pageSize:20,
				page:1,
				page_totle:0,
				search_form:{
					supplier:'',
					buyer_date:"",
					goods_name:"",
					logistics_number:"",
					customer:'',
					start_time:"",
					end_time:"",
					brand:''
				},
				price:'',
				isShowLookCode:false,
				isShow:false,
				rowData:{},
				time:[],
				hsPriceData:[],
				order_form:{
					inst_store_date:"",
					buyer_date:'',
					goods_name:"",
					code:'',
					inst_store_price:'',
					profit:'',
					sales_price:'',
					customer:"",
					supplier:''
				},
				sortType:1,
				addHsShow:false,
				priceSum:0,
				salesSum:0,
				profitSum:0,
				key:'',
				loading:false
            }
        },
        mounted(){
            document.title = '采购利润明细'
			let now = this.$utils.formatNowDate(2)
			this.time = [now,now]
			// this.lodeListAdd()
			this.lodeList(2)
        },
        methods:{
			delProfit(id,scope){
				let index = scope.$index
				this.$confirm('确定删除', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$post('/buyerSys/delProfit',{id},res=>{
						let result = res.data
						if(result.code == 200){
							this.$message.success('删除成功')
							this.list.splice(index,1)
							
						}
					})
				})
			},
			downLode(){
				let cid = sessionStorage.getItem('cid')
				
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				
				 var customer
				 if(this.search_form.customer){
					customer = '&customer=' + this.search_form.customer
				 }else{
					customer = '&customer='
				 }
				 
				 var start_time
				 if(this.search_form.start_time){
				 	 start_time = '&start_time=' + this.search_form.start_time
				 }else{
				 	 start_time = '&start_time='
				 }
				 
				 var end_time
				 if(this.search_form.end_time){
				 	 end_time = '&end_time=' + this.search_form.end_time
				 }else{
				 	 end_time = '&end_time='
				 }
				 
				 var goods_name
				 if(this.search_form.goods_name){
				 	 goods_name = '&goods_name=' + this.search_form.goods_name
				 }else{
				 	 goods_name = '&goods_name='
				 }
				 
				 var supplier
				 if(this.search_form.supplier){
				 	 supplier = '&supplier=' + this.search_form.supplier
				 }else{
				 	 supplier = '&supplier='
				 }
				 
				 var brand
				 if(this.search_form.brand){
				 	 brand = '&brand=' + this.search_form.brand
				 }else{
				 	 brand = '&brand='
				 }
				
				let url = `${this.$domain}/excel/exportProfitList?cid=${cid}${brand}${supplier}${customer}${start_time}${end_time}${goods_name}`
				location.href = url
			},
			delHsPrice(row){
				let param = {
					buyer_date:row.buyer_date,
					goods_name:row.goods_name
				}
				this.$post('/buyerSys/delHsPrice',param,res=>{
					this.lodeList(2)
				})
			},
			sort(key,type=1){
				for(let i in this.order_form){
					if(i==key){
						if(this.order_form[i]==1){
							this.order_form[i] = 2
						}else{
							this.order_form[i] = 1
						}
					}else{
						this.order_form[i] = ''
					}
				}
				this.lodeList()
			},
			
			setHsPrice(){
				if(this.selectGoods.length == 0) return this.$message.error('请选择商品')
				this.isShow = true
				this.hsPriceData = []
				
				for(let item of this.selectGoods){
					this.hsPriceData.push({
						goods_name:item.goods_name,
						inst_store_price:item.inst_store_price,
						cid:item.cid,
						inst_store_date:item.inst_store_date,
						buyer_date:item.buyer_date
					})
				}
				
			},
			addHsSuccess(){
				this.addHsShow = false
				this.lodeList()
			},
			setHsPriceConfirm(){
				
				let arr = this.hsPriceData.map((item,i)=>{
					let obj = {
						goods_name:item.goods_name,
						cid:item.cid,
						price:item.inst_store_price,
						buyer_date:item.buyer_date,
						inst_store_date:item.inst_store_date
					}
					return obj
				})
				this.loading_btn = true
				this.$post('/buyerSys/setHsPrice',arr,res=>{
					this.$message.success('操作成功')
					this.isShow = false
					this.loading_btn = false
					this.lodeList()
				})
			},
			lookCode(row){
				row.code_arr = JSON.parse(row.code_arr)
				this.rowData = row
				setTimeout(()=>{
					this.isShowLookCode = true
				},100)
			},
			toTypeInfo(row,type=1){
				if(type==1){
					this.jump(`/buyerSys/buyerInfo?order_number=${row.inst_order_number}`)
					// this.$router.push({
					// 	path:"/buyerSys/buyerInfo",
					// 	query:{
					// 		order_number:row.inst_order_number				,
					// 	}
					// })
				}else{
					let tt = row.type
					if(tt==2){
						this.jump(`/wholesalerSys/wholesaler?order_number=${row.order_number}`)
						// this.$router.push({
						// 	path:"/wholesalerSys/wholesaler",
						// 	query:{
						// 		order_number:row.order_number				,
						// 	}
						// })
					}else if(tt==3){
						this.jump(`/wholesalerSys/wholesalerReturn?order_number=${row.order_number}`)
						// this.$router.push({
						// 	path:"/wholesalerSys/wholesalerReturn",
						// 	query:{
						// 		order_number:row.order_number				,
						// 	}
						// })
					}
				}
			},
			updateSalesPrice(){
				if(!this.price) return this.$message.error('请输入成本单价')
				if(this.selectGoods.length == 0) return this.$message.error('请选择修改的商品')
				
				for(let item of this.selectGoods){
					item.inst_store_price = this.price
				}
			
				this.$post('/buyerSys/updateProfit',this.selectGoods,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.price = ''
						this.lodeList(2)
					}
				})
					
			},
			getCustomerName(val){
				this.search_form.customer = val
			},
			getSupplierName(val){
				this.search_form.supplier = val
			},
			clearSearch(){
				this.search_form  = {
				        supplier:'',
				        buyer_date:"",
				        goods_name:"",
				        logistics_number:"",
						customer:'',
						brand:''
				}
				// let now = this.$utils.formatNowDate(2)
				// this.time = [now,now]
				this.page=1
				this.lodeList()
			},
			getProfitTotal(){
				
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				let params = {
					search_form:this.search_form
				}
				this.$post('/buyerSys/getProfitTotal',params,res=>{
					this.priceSum = res.data.data.priceSum.toFixed(2)
					this.salesSum = res.data.data.salesSum.toFixed(2)
					this.profitSum = res.data.data.profitSum.toFixed(2)
				})
			},
			searchAdd(){
				this.$confirm('是否需要同步数据', '提示', {
				          confirmButtonText: '需要',
				          cancelButtonText: '不需要',
				          type: 'warning'
				        }).then(() => {
				           this.lodeListAdd()
				        }).catch(() => {
							this.lodeList()
				        });
			},
			lodeListAdd(){
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize,
					order_form:this.order_form
				}
				this.loading = true
				this.$post('/buyerSys/addProfitList',params,res1=>{
					this.$post('/buyerSys/getProfitList',params,res=>{
						let data = res.data.data
						
						this.page_totle = data.count
						this.list = data.result
						this.loading = false
					})
					this.getProfitTotal()
				})
			},
			syncProfit(){
				this.$post('/buyerSys/syncProfit',{},res=>{
					
				})
			},
            lodeList(type=1){
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize,
					order_form:this.order_form
				}
				this.loading = true
					
				this.$post('/buyerSys/getNewProfitList',params,res=>{
					let data = res.data.data
					console.log(data.result)
					this.page_totle = data.count
					
					let arr = []
					for(let i in data.result){
						arr.push(data.result[i])
					}
					this.list = arr
					this.priceSum = res.data.data.priceSum.toFixed(2)
					this.salesSum = res.data.data.salesSum.toFixed(2)
					this.profitSum = res.data.data.profitSum.toFixed(2)
					this.loading = false
				})
					
				
				
				
				
				// this.getProfitTotal()
				// if(type==1){
				// 	this.syncProfit()
				// 	this.$post('/buyerSys/getProfitList',params,res=>{
				// 		let data = res.data.data
						
				// 		this.page_totle = data.count
				// 		this.list = data.result
				// 		this.loading = false
				// 	})
				// 	this.getProfitTotal()
				// }else{
				// 	this.$post('/buyerSys/addProfitList',params,res1=>{
				// 		this.syncProfit()
				// 		this.$post('/buyerSys/getProfitList',params,res=>{
				// 			let data = res.data.data
							
				// 			this.page_totle = data.count
				// 			this.list = data.result
				// 			this.loading = false
				// 		})
				// 		this.getProfitTotal()
				// 	})
				// }
				
			},            
        }
    }
</script>
<style lang="scss" scoped>
	

</style>
